<template>
  <div class="dashboard-container">
    <div class="dashboard-title">
      <div>组织架构</div>
      <div class="rtList">
        <div><input type="text"></div>
        <div class="aLink">导入部门</div>
        <div class="aLink">编辑部门</div>
      </div>
    </div>
    <div class="dashboard-content">
      <div class="sidebarBox">
        <div class="addDepartment">添加部门</div>
        <div class="staffTree">
          <el-tree :data="data" node-key="label" :props="defaultProps" :default-expanded-keys="['总部']" accordion @node-click="handleNodeClick" />
        </div>
      </div>
      <div class="minCont">
        <div class="contTitle">
          <span>
            <el-upload
              ref="upload"
              action="/"
              :show-file-list="false"
              :on-change="importExcel"
              :auto-upload="false"
            >
              <el-button slot="trigger" size="small" type="primary" icon="el-icon-upload">上传文件</el-button>
            </el-upload>
          </span>
          <span>编辑部门</span><span>调整部门</span></div>
        <div class="tableItem">
          <el-table
            ref="multipleTable"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              label="日期"
              width="120"
            >
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="120"
            />
            <el-table-column
              prop="address"
              label="地址"
              show-overflow-tooltip
            />
          </el-table>
          <div class="pageList">
            <el-pagination
              layout="prev, pager, next"
              :total="1000"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import XLSX from 'xlsx'

export default {
  name: 'Dashboard',
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      multipleSelection: [],
      data: [{
        label: '传智播客',
        children: [{
          label: '总部',
          children: [{
            label: '总裁办公室'
          },
          {
            label: '行政部'
          }]
        },
        { label: '北京顺义区',
          children: [{
            label: '教研部'
          }]
        }
        ]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    importExcel(file) {
      // let file = file.files[0] // 使用传统的input方法需要加上这一步
      const types = file.name.split('.')[1]
      const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)
      if (!fileType) {
        this.$message('格式错误！请重新选择')
        return
      }
      this.file2Xce(file).then(tabJson => {
        if (tabJson && tabJson.length > 0) {
          this.xlsxJson = tabJson
          console.log('数据', this.xlsxJson)
          // xlsxJson就是解析出来的json数据,数据格式如下
          // [
          //   {
          //     sheetName: sheet1
          //     sheet: sheetData
          //   }
          // ]
        }
      })
    },
    file2Xce(file) {
      return new Promise(function(resolve, reject) {
        const reader = new FileReader()
        reader.onload = function(e) {
          const data = e.target.result
          this.wb = XLSX.read(data, {
            type: 'binary'
          })
          const result = []
          this.wb.SheetNames.forEach((sheetName) => {
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
            })
          })
          resolve(result)
        }
        reader.readAsBinaryString(file.raw)
        // reader.readAsBinaryString(file) // 传统input方法
      })
    }
  }
}
</script>
<style lang="scss">
  .dashboard{
    &-content{
      .tableItem{
        .el-table thead th,.el-table thead tr{
          background: #edeffd;
        }
      }
      .pageList{
        .el-pager li{
          margin: 0 5px;
          min-width: 28px;
          width: 28px;
        }
        .active{
          background: #3345ff;
          border-radius: 100%;
          color:#fff;
        }
      }
    }
  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container{
      /*padding: 15px 0;*/
    }
    &-title {
      padding: 0 15px;
      line-height: 50px;
      background: #edeffd;
      display: flex;
      justify-content: space-between;
      .rtList{
        display: flex;
        color:#3345ff;
        font-size: 14px;
        .aLink{
          padding-left: 10px;
        }
      }
    }
    &-content{
      position: relative;
      .sidebarBox{
        position: fixed;
        height: calc(100vh - 120px);
        padding: 15px 40px;
        left: 0px;
        bottom:0px;
        width: 210px;
        background: #fff;
        .addDepartment{
          background: #3345ff;
          color:#fff;
          text-align: center;
          line-height: 35px;
          border-radius: 4px;
        }
        .staffTree{
          margin-top: 10px;
        }
      }
      .minCont{
        margin-left: 210px;
        padding:0 15px;
        .contTitle{
          line-height: 50px;
          span{
            color:#3345ff;
            padding: 0 5px;
            font-size: 14px;
          }
        }
        .tableItem{
          background: #fff;
          .pageList{
            text-align: right;
            padding: 15px;
          }
        }
      }
    }
  }
</style>
